<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>课工场题库</title>
	<style type="text/css">
		.top {
			/* 设置宽度高度背景颜色 */
			height: auto;
			/*高度改为自动高度*/
			width: 100%;
			margin-left: 0;
			background: rgb(51, 51, 51);
			position: fixed;
			/*固定在顶部*/
			top: 0;
			/*离顶部的距离为0*/
			margin-bottom: 0px;
		}

		.top ul {
			/* 清除ul标签的默认样式 */
			width: auto;
			/*宽度也改为自动*/
			list-style-type: none;
			white-space: nowrap;
			overflow: hidden;
			margin-left: 5%;
			/* margin-top: 0;          */
			padding: 0;
		}

		.top li {
			float: left;
			/* 使li内容横向浮动，即横向排列  */
			margin-right: 2%;
			/* 两个li之间的距离*/
			position: relative;
			overflow: hidden;
			/*移动顶部栏目位置*/
			position: relative;
			left: 230px;
		}

		.top li a {
			/* 设置链接内容显示的格式*/
			display: block;
			/* 把链接显示为块元素可使整个链接区域可点击 */
			color: white;
			text-align: center;
			padding: 3px;
			overflow: hidden;
			text-decoration: none;
			/* 去除下划线 */
		}

		.top li a:hover {
			/* 鼠标选中时背景变为黑色 */
			background-color: #111;
		}

		body {
			background: #eff3f5;
		}

		.text-1 {
			/*设置字体大小*/
			font-size: 17px;
			/* 设置链接内容显示的格式*/
			display: block;
			/* 把链接显示为块元素可使整个链接区域可点击 */
			color: white;
			text-align: center;
			padding: 3px;
			overflow: hidden;
			text-decoration: none;
			/* 去除下划线 */
		}

		.rec {
			height: 26px;
			border-left: 3px solid #ffffff;
			margin: 0px 20px;
			/*设置字体大小*/
			font-size: 17px;
			/* 设置链接内容显示的格式*/
			display: block;
			/* 把链接显示为块元素可使整个链接区域可点击 */
			color: white;
			text-align: center;
			padding: 3px;
			overflow: hidden;
			text-decoration: none;
			/* 去除下划线 */
		}

		.right {
			float: left;
			/* 使li内容横向浮动，即横向排列  */
			margin-right: 2%;
			/* 两个li之间的距离*/
			position: relative;
			overflow: hidden;
			/*移动顶部栏目位置*/
			position: relative;
			left: 530px;
		}

		.user-info {
			/*背景颜色*/
			display: block;
			/*行距*/
			line-height: 30px;
			/*浮动*/
			float: left;
			/*颜色*/
			color: #FFFFFF;
		}

		.esc {
			/*行距*/
			line-height: 30px;
			/*浮动*/
			float: left;
			/*宽距*/
			margin-left: 20px;
			/*颜色*/
			color: #fff;
			/*鼠标指针样式:食指;*/
			cursor: pointer;
			/*字体大小*/
			font-size: 14px;
		}

		.evaluation_box {
			/*宽*/
			width: 1000px;
			/*长*/
			height: 49px;
			/*居中*/
			margin: 0 auto;
			/*下边框*/
			border-bottom: 2px solid #e9e9e9;
			/*定位方式:相对定位*/
			position: relative;
			left: 25px;
			top: 57px;
			/*背景颜色*/
			background: #fff;
		}

		.evaluation_list {
			/*宽*/
			width: 100%;
			/*长*/
			height: 49px;
			/*定位方式:绝对定位*/
			position: absolute;
			left: 10px;
			top: 10px;
			margin-left: 15px;
		}

		.evaluation_list a {
			text-decoration: none;
			/* 去除下划线 */
			color: #111111;
		}

		.divide_type {
			/*盒子高度*/
			height: 30px;
			/*字体高度*/
			line-height: 30px;
			/*字体大小*/
			font-size: 14px;
			/*字体颜色*/
			color: #666666;
			/*宽度*/
			width: 102.5%;
			/*字体位置*/
			padding-left: 25px;
			/*相对定位*/
			position: relative;
			left: -24px;
			top: -15px;
			/*背景颜色*/
			background-color: #F9F9F9;
			/*字体粗细*/
			font-weight: bold;
		}

		.divide_type2 {
			/*盒子高度*/
			height: 30px;
			/*字体高度*/
			line-height: 30px;
			/*字体大小*/
			font-size: 14px;
			/*字体颜色*/
			color: #666666;
			/*宽度*/
			width: 975px;
			/*字体位置*/
			padding-left: 25px;
			/*相对定位*/
			position: relative;
			left: 277px;
			top: -400px;
			/*背景颜色*/
			background-color: #F9F9F9;
			/*字体粗细*/
			font-weight: bold;
		}

		.wrapper {
			width: 952px;
			min-height: 620px;
			margin: 0 auto;
			padding: 16px 24px;
			background-color: #FFFFFF;
			position: relative;
			left: 25px;
			top: 57px;
		}

		#dayTest-box {
			width: 800px;
			height: 60px;
			line-height: 60px;
			padding: 24px 76px;
		}

		.test-over {
			text-align: center;
		}

		.test-overList {
			width: 260px;
			height: 60px;
			font-size: 16px;
			color: #000;
			display: inline-block;
		}

		.test-overImg {
			display: inline-block;
			width: 60px;
			height: 60px;
			vertical-align: top;
			margin-right: 15px;
		}

		.test-nocount {
			height: 60px;
			line-height: 60px;
			font-size: 16px;
			color#000: ;
			text-align: center;
		}

		.test-overNum {
			font-size: 24px;
			color: #a0c001;
		}

		.test-failure {
			height: 60px;
			line-height: 60px;
			font-size: 16px;
			color#000: ;
			text-align: center;
		}

		.test-failureImg {
			display: inline-block;
			width: 33px;
			height: 33px;
			background: url(../img/ques_Count_Loading.png)no-repeat;
			vertical-align: middle;
			margin-right: 20px;
			cursor: pointer;
		}

		.test-nocountImg {
			display: inline-block;
			width: 80px;
			height: 50px;
			background: url(../img/no_ques_count.png)no-repeat;
			vertical-align: top;
			margin-right: 20px;
		}

		.test_box {
			position: absolute;
			top: 370px;
			left: 370px;
			height: 368px;
		}

		.test_list_box {
			position: relative;
			width: 820px;
			height: 278px;
			margin: 0 auto;
			margin-bottom: 40px;
			margin-top: 30px;
			display: flex;
			justify-content: space-between;
		}

		.item1 {
			left: 0px;
		}

		.skill_test_img {
			position: relative;
			left: 50px;
		}

		.test_list {
			position: absolute;
			top: 0;
			width: 240px;
			height: 230px;
			text-align: center;
			padding: 24px 0;
			background-color: #FAFAFA;
		}

		.test_list_name {
			position: relative;
			top: 20px;
			left: -60px;
			width: 100%;
			height: 28px;
			line-height: 38px;
			font-size: 16px;
			color: #000;
			margin-top: 5px;
		}

		.test_list_order {
			position: relative;
			top: 10px;
			left: 75px;
			width: 100%;
			height: 24px;
			line-height: 24px;
			font-size: 14px;
			color: #666;
		}

		.test_list_go {
			width: 132px;
			height: 32px;
			margin: 0 auto;
			margin-top: 15px;
		}

		.goto_test {
			position: relative;
			top: 50px;
			left: -35px;
			text-decoration: none;
			display: inline-block;
			width: 140px;
			height: 35px;
			color: #FFFFFF;
			line-height: 32px;
			font-size: 16px;
			background: #A0C001;
			border-radius: 16px;
		}

		.item2 {
			left: 290px;
		}

		.test_list_img {
			width: 132px;
			height: 126px;
			margin: 0 auto;
		}

		.item3 {
			right: 0;
		}
	</style>
</head>

<body>
<!--
    作者：呆先森
    时间：2021-01-22
    描述：顶部栏目
-->
<div class="top">
	<center>
		<ul>
			<li class="rec">

			</li>
			<li class="text-1">
				<b>题库</b>
			</li>
			<li>
				<a href="#">我的自测</a>
			</li>
			<li>
				<a href="#">统一测试</a>
			</li>
			<li>
				<a href="#">我的历史</a>
			</li>
			<li>
				<a href="#">试题广场</a>
			</li>
			<li>
				<a href="#">课程</a>
			</li>
			<div class="right">
				<a class="user-info" id="">xxxx</a>
				<div class="esc">
					<a>退出</a>
				</div>
			</div>
		</ul>
	</center>
</div>

<div class="evaluation_box">
	<div class="evaluation_list ">
		<a href="#" style="display: inline;">分类自测</a>
		<a href="#" style="display: inline;margin-left: 70px;">本班排行</a>
		<a href="#" style="display: inline;margin-left: 70px;">本校排行</a>
		<a href="#" style="display: inline;margin-left: 70px;">全国排行</a>
	</div>
</div>

<div class="wrapper">
	<h3 class="test_title divide_type">本日答题</h3>

	<div id="dayTest-box">

		<div class="dayTest-list test-over" id="normalDiv" style="display:none;">
			<div class="test-overList test-overItem1">
				<span class="test-overImg"></span>累计答题数：<span class="test-overNum" id="questionCount">0</span>
			</div>
			<div class="test-overList test-overItem2">
				<span class="test-overImg"></span>实际答题数：<span class="test-overNum" id="actualQuestionCount">0</span>
			</div>
			<div class="test-overList test-overItem3">
				<span class="test-overImg"></span>正确率：<span class="test-overNum" id="correctRate">0</span>
			</div>
		</div>

		<div class="dayTest-list test-nocount"  style="display:block">
			<img class="test-nocountImg" src="/related/no_ques_count.png"/> 今天还没有做题哟~加油！
		</div>

		<div class="dayTest-list test-failure" id="failureDiv" style="display:none;">
			获取数据失败，请刷新重新尝试！<span class="test-failureImg" onclick="javascript:loadTodayQuestionCount();"></span>
		</div>

		<div class="dayTest-list test-failure" id="failureDivLoading" style="display:none;">
			数据加载中，请稍后......
		</div>

	</div>

</div>
<h3 class="test_title divide_type2">测试入口</h3>
<div class="test_box">

	<div class="test_list_box">

		<!--         	 0.课程复习数量，1，模拟真题型数量，2，专项技能型数量 -->

		<div class="test_list item1">
			<img class="skill_test_img" src="/related/skill_test_img.png" />
			<span class="test_list_name">专项技能型<img src="/related/pc.png" title="可以选取技能点进行评测"></span>
			<span class="test_list_order">完成20道题</span>
			<span class="test_list_go">

							      <a class="courseexam goto_test" href="#">进入</a>


					</span>
		</div>

		<!--         	 0.课程复习数量，1，模拟真题型数量，2，专项技能型数量 -->

		<div class="test_list item2">
			<img class="skill_test_img" src="/related/class_test_img.png" />
			<span class="test_list_name">课程复习型<img src="/related/pc.png" title="按单门课程进行测试"></span>
			<span class="test_list_order">完成0道题</span>
			<span class="test_list_go">
							 <a  class="courseexam goto_test" href="#">进入</a>
						     </span>
		</div>

		<!--         	 0.课程复习数量，1，模拟真题型数量，2，专项技能型数量 -->

		<div class="test_list item3">
			<img class="skill_test_img" src="/related/imitate_test_img.png" />
			<span class="test_list_name">模拟真题型<img src="/related/pc.png" title="模拟真题自测和正式结业考试类似，帮助您快速通过结业考试。"></span>
			<span class="test_list_order">完成0道题</span>
			<span class="test_list_go">
							 <a class="goto_test"  href="#">进入</a>
						     </span>
		</div>

	</div>
</div>

</body>

</html>